<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能客服</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .chat-container {
            height: calc(100vh - 200px);
        }
        .message-bubble {
            animation: fadeIn 0.3s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .recording {
            animation: pulse 1s infinite;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto max-w-4xl h-screen flex flex-col">
        <!-- 头部 -->
        <header class="bg-blue-600 text-white p-4 shadow-lg">
            <h1 class="text-2xl font-bold text-center">
                <i class="fas fa-robot mr-2"></i>AI智能客服
            </h1>
        </header>

        <!-- 聊天区域 -->
        <div class="flex-1 bg-white chat-container overflow-y-auto p-4" id="chatContainer">
            <div class="message-bubble mb-4 flex justify-start">
                <div class="bg-blue-100 text-blue-800 rounded-lg p-3 max-w-xs lg:max-w-md">
                    <p class="text-sm">您好！我是AI智能客服，有什么可以帮助您的吗？</p>
                    <span class="text-xs text-gray-500 mt-1 block">刚刚</span>
                </div>
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="bg-white border-t p-4">
            <div class="flex items-center space-x-2">
                <input 
                    type="text" 
                    id="messageInput" 
                    placeholder="请输入您的问题..." 
                    class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    onkeypress="if(event.key === 'Enter') sendMessage()"
                >
                <button 
                    id="voiceBtn" 
                    onclick="toggleVoiceInput()"
                    class="bg-gray-500 hover:bg-gray-600 text-white rounded-lg p-2 transition-colors"
                    title="语音输入"
                >
                    <i class="fas fa-microphone"></i>
                </button>
                <button 
                    onclick="sendMessage()"
                    class="bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-6 py-2 transition-colors"
                >
                    <i class="fas fa-paper-plane mr-2"></i>发送
                </button>
            </div>
            <div id="voiceStatus" class="text-sm text-gray-600 mt-2 hidden">
                <i class="fas fa-circle text-red-500 recording"></i> 正在录音...
            </div>
        </div>
    </div>

    <script>
        let isRecording = false;
        let recognition = null;
        let isVoiceSupported = false;

        // 初始化语音识别
        function initSpeechRecognition() {
            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                recognition = new SpeechRecognition();
                recognition.lang = 'zh-CN';
                recognition.continuous = false;
                recognition.interimResults = false;

                recognition.onresult = function(event) {
                    const transcript = event.results[0][0].transcript;
                    document.getElementById('messageInput').value = transcript;
                    sendMessage();
                };

                recognition.onerror = function(event) {
                    console.error('语音识别错误:', event.error);
                    stopRecording();
                };

                recognition.onend = function() {
                    stopRecording();
                };

                isVoiceSupported = true;
            }
        }

        // 切换语音输入
        function toggleVoiceInput() {
            if (!isVoiceSupported) {
                alert('您的浏览器不支持语音识别功能');
                return;
            }

            if (isRecording) {
                stopRecording();
            } else {
                startRecording();
            }
        }

        // 开始录音
        function startRecording() {
            isRecording = true;
            document.getElementById('voiceBtn').classList.add('bg-red-500', 'hover:bg-red-600');
            document.getElementById('voiceBtn').classList.remove('bg-gray-500', 'hover:bg-gray-600');
            document.getElementById('voiceStatus').classList.remove('hidden');
            
            if (recognition) {
                recognition.start();
            }
        }

        // 停止录音
        function stopRecording() {
            isRecording = false;
            document.getElementById('voiceBtn').classList.remove('bg-red-500', 'hover:bg-red-600');
            document.getElementById('voiceBtn').classList.add('bg-gray-500', 'hover:bg-gray-600');
            document.getElementById('voiceStatus').classList.add('hidden');
            
            if (recognition) {
                recognition.stop();
            }
        }

        // 发送消息
        async function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            
            if (!message) return;

            // 添加用户消息
            addMessage(message, 'user');
            input.value = '';

            // 模拟AI回复（实际项目中应该调用后端API）
            setTimeout(() => {
                const responses = [
                    "我理解您的问题，让我为您详细解答。",
                    "这是一个很好的问题，我来帮您分析一下。",
                    "根据您的情况，我建议您可以这样处理。",
                    "我已经记录了您的问题，会尽快为您提供解决方案。",
                    "感谢您的咨询，还有其他问题需要帮助吗？"
                ];
                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                addMessage(randomResponse, 'ai');
                
                // 语音播报回复
                speakText(randomResponse);
            }, 1000);
        }

        // 添加消息到聊天区域
        function addMessage(text, sender) {
            const chatContainer = document.getElementById('chatContainer');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message-bubble mb-4 flex ' + (sender === 'user' ? 'justify-end' : 'justify-start');
            
            const bubbleDiv = document.createElement('div');
            bubbleDiv.className = sender === 'user' 
                ? 'bg-blue-600 text-white rounded-lg p-3 max-w-xs lg:max-w-md' 
                : 'bg-gray-100 text-gray-800 rounded-lg p-3 max-w-xs lg:max-w-md';
            
            bubbleDiv.innerHTML = `
                <p class="text-sm">${text}</p>
                <span class="text-xs ${sender === 'user' ? 'text-blue-200' : 'text-gray-500'} mt-1 block">刚刚</span>
            `;
            
            messageDiv.appendChild(bubbleDiv);
            chatContainer.appendChild(messageDiv);
            
            // 滚动到底部
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // 语音播报
        function speakText(text) {
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = 'zh-CN';
                utterance.rate = 0.8;
                speechSynthesis.speak(utterance);
            }
        }

        // 页面加载完成后初始化
        window.onload = function() {
            initSpeechRecognition();
        };
    </script>
</body>
</html>
